<template>
  <div>
    <el-input v-if="isEmpty" :value="emptyText" disabled></el-input>
    <el-select
      v-else
      filterable
      autoComplete="new-password"
      remote
      default-first-option
      placeholder="请选择贷后项目"
      v-select-loadmore="loadmore"
      :select-loadmore-disabled="loadmoreDisabled"
      :select-loadmore-distance="50"
      :value="value"
      :remote-method="customerRemoteMethod"
      :class="css"
      @change="handleChange"
    >
      <el-option
        v-for="item in options"
        :key="item.customer_related_id"
        :label="item.customer_name"
        :value="item.customer_related_id"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    emptyText: {
      type: String,
      default: '没有可以选择的项目',
    },
    otherParams: {
      type: Object,
      default: () => {
        return {
          'load_beh_status.eq': 1,
        }
      },
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      params: {
        index: 1,
        size: 40,
        'loan_approval_status.eq': 3,

        'service_id.eq': '',
        // fields: [
        //   'customer_related_id',
        //   'customer_name',
        //   'address',
        //   'mobile_no',
        //   'corp_name',
        //   'left_funds',
        //   'load_date',
        //   'load_end_date',
        //   'bank_name',
        //   'reply_funds',
        // ],
      },
      order: {
        load_date: 'desc',
      },
      loading: false,
      noMore: false,
      query: '',
      firstOptions: [],
      options: [],
      isEmpty: false,
    }
  },
  computed: {
    ...mapGetters(['clientId', 'userId']),
    css() {
      return (this.$attrs && this.$attrs.class) || 'w-100'
    },
    loadmoreDisabled() {
      return this.loading || this.noMore
    },
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.params['orWhere.res_a.eq'] = this.userId
    this.params['orWhere.res_b.eq'] = this.userId
    this.customerRemoteMethod('', true)
  },
  mounted() {},
  methods: {
    async customerRemoteMethod(query = '', checkEmpty) {
      this.params.index = 1
      this.query = query
      if (!query && this.firstOptions.length) {
        this.options = this.firstOptions
      } else {
        await this.getData(query, checkEmpty)
        if (!query) {
          this.firstOptions = [...this.options]
        }
      }
    },
    async getData(query = '', checkEmpty) {
      this.loading = true
      const params = {
        ...this.otherParams,
        ...this.params,
        customer_name: query,
      }
      const [res] = await this.$utils.promise(
        this.$api.getData('credit', 'customer_related', params, this.order)
      )
      this.loading = false
      const data = (res && res.data) || {}
      const pageIndex = data.pageIndex || 0
      const totalPages = data.totalPages || 0
      const list = data.data || []
      this.noMore = pageIndex >= totalPages
      this.options = pageIndex === 1 ? list : [...this.options, ...list]

      if (checkEmpty) {
        this.isEmpty = this.options.length === 0
      }
    },
    handleChange(val) {
      const data = this.options.find(it => it.customer_related_id === val)
      this.$emit('change', val, data ? { ...data } : data)
    },
    loadmore() {
      this.params.index++
      this.getData(this.query)
    },
  },
}
</script>
<style lang="scss" scoped></style>
